// 导入登录接口
import { Login } from '../api/index'
import {useDispatch} from 'react-redux'
import {getPermission} from '../store/permissionSlice'
// 使用导航
import { useNavigate } from 'react-router-dom'
// 数据数据
// import {useCutdown} from  '../hooks/useCutdown'
import { Button,  Form, Input } from 'antd';
import '../assets/css/login.scss'

function LoginView() {
  // 定义用户信息
  // 创建导航
  const navigate = useNavigate();
  // const [count,start,reset] = useCutdown(5,()=>alert("计时完毕"));
  // 创建一个动作发送器
  const dispatch = useDispatch();
  const login = (values) => {
    Login(values)
      .then(res => {
        // 登录成功
        if (res.data.code === 0) {
          // 存储user,token
          // sessionStorage 关闭浏览器后就销毁，localStorage不会自动销毁
          sessionStorage.setItem("user",JSON.stringify(res.data.user))
          sessionStorage.setItem("token",res.data.token);
          // 发送动作
          dispatch(getPermission())
          navigate("/admin")
        } else {
          alert("登录失败")
        }
      })
  }
  return (<div className='login'>
    <div className="loginBox">
      <h2>登录<span style={{color:"#36f"}}>我要运动</span></h2>
    <Form
    name="basic"
    labelCol={{
      span: 0,
    }}
    wrapperCol={{
      span: 24,
    }}
    style={{
      maxWidth: 600,
    }}
    initialValues={{
      remember: true,
    }}
    onFinish={login}
     
    autoComplete="off"
  >
    <Form.Item
      label=""
      name="name"
      rules={[
        {
          required: true,
          message: '必须输入用户名',
        },
        {
          min:4,
          message:"用户名不得少于4位"
        }
        
      ]}
    >
      <Input placeholder='用户名' />
    </Form.Item>

    <Form.Item
      label=""
      name="password"
      rules={[
        {
          required: true,
          message: '请输入6位密码',
        },
        {
           pattern:/.{6,18}/,
          message:"密码6-8位"
        }
      ]}
    >
      <Input.Password placeholder='密码' />
    </Form.Item>
 

    <Form.Item
      wrapperCol={{
        offset: 0,
        span: 24,
      }}
    >
      <Button type="primary" htmlType="submit" block>
        登录
      </Button>
    </Form.Item>
  </Form>
    </div>
  </div>);
}

export default LoginView;